<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<style>
</style>
<body>
    <div id="app">
        <p>num: {{num}}</p>
        <p>{{changeNum()}}</p>
        <p>watchNum: {{watchNum}}</p>
        <p><button @click="++num">++num</button></p>
        <p>
            <input type="text" v-model="msg">
        </p>
    </div>

    <script src="./base/vue.js"></script>
    <script>
        //watch 用来监听一个数据的变化，变化之后做一些操作
        //计算属性  是根据现有数据派发一个新的数据，两者产生永久关联，建立缓存。
        new Vue({
            el:"#app",
            data: {
               num:1,
               msg:"",
               watchNum:""
            },
            watch:{
                // num:function(newVal){
                //     this.watchNum = newVal*2
                // }
                num:{
                    immediate:true,
                    handler(newVal){
                        this.watchNum = newVal*2
                    }
                }
            },
            methods:{
                changeNum(){
                    //console.log("changeNum")
                    return this.num*2
                }
            }
        })


    </script>
</body>
</html>